<template>
	<view class="perfect-msg">
		<bsNavBar title='完善信息'></bsNavBar>
		<view class="form-box">
			<u-form :label-style='style' label-position='top' :error-type="errorType" :model="form" ref="uForm">
				<view class="head-box">
					<u-form-item label="头像" prop="headImg">
						<u-upload @on-success='onSuccess' :header='header' :action='action' :show-upload-list='false' :custom-btn="true">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<view class="up-img">
									<image class="img" :src="baseImgUrl+form.headImg" mode=""></image>
									<u-icon class='icon' name="photo" color="#fff" size="28"></u-icon>
								</view>
							</view>
						</u-upload>
					</u-form-item>
				</view>
				<u-form-item label="姓名" prop="userName">
					<u-input placeholder='请填写真实姓名' v-model="form.userName" />
				</u-form-item>
				<u-form-item label="账户类型" prop="userType1">
					<u-input placeholder='请选择账户类型' @click="accountTypeShow = true" v-model="form.userType1" type="select" />
				</u-form-item>
				<view class="account-text">
					提交后不可更改，请如实选择
				</view>
				<!-- <u-action-sheet :list="accountType" v-model="accountTypeShow" @click="handAccountType()"></u-action-sheet> -->
				<u-select @confirm='confirm' title='选择账户类型' v-model="accountTypeShow" :list="accountType"></u-select>
				<u-form-item label="公司名称" prop="companyName">
					<u-input placeholder='自由职业者请填写无' v-model="form.companyName" />
				</u-form-item>
				<u-form-item label="职务" prop="position">
					<u-input v-model="form.position" placeholder='请填写职务' />
				</u-form-item>
				<!-- <u-form-item label="手机" prop="phone">
					<u-input v-model="form.phone" placeholder='请填写手机号' />
				</u-form-item> -->
				<u-form-item label="邮箱" prop="email">
					<u-input v-model="form.email" placeholder='请填写邮箱' />
				</u-form-item>
				<u-form-item label="密码" prop="userPassword">
					<u-input v-model="form.userPassword" placeholder='用于登录网站' />
				</u-form-item>

			</u-form>
		</view>
		<view class="btn-box">
			<u-button type='jz' @click="submit">提 交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		baseImgUrl,
		baseURL
	} from '@/config/config.js'
	export default {
		data() {
			return {
				baseImgUrl: baseImgUrl,
				action: baseURL + '/uploadDownload/api/imgUpload',
				header: {
					Authorization: this.cache.getCache('userCode')
				},

				accountTypeShow: false,
				accountType: [{
						label: '个人',
						value: '1'
					},
					{
						label: '企业',
						value: '0'
					},
				],
				form: {
					userName: '',
					headImg: '',
					userType: '',
					companyName: '',
					position: '',
					email: '',
					userPassword: '',
				},
				errorType: ['border-bottom', 'toast', 'message'],
				style: {
					color: '#303030',
					fontWeight: 'bold'
				},
				rules: {
					position: [{
						required: true,
						message: '请输入单位职务',
						trigger: ['change', 'blur'],
					}],
					userType: [{
						required: true,
						message: '请选择选择账户类型',
						trigger: ['change', 'blur'],
					}],
					headImg: [{
						required: true,
						message: '请上传头像',
						trigger: ['change', 'blur'],
					}],
					userName: [{
						required: true,
						message: '请输入真实姓名',
						trigger: ['change', 'blur'],
					}],
					userPassword: [{
						validator: (rule, value, callback) => {
							var reg = /^\S*(?=\S{6,})(?![^a-zA-Z]+$)(?!\D+$)\S*$/
							if (value.length < 6 || value.length > 8) {
								callback(new Error('密码长度在6-8位'))
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('密码长度在6-8位(6-8位数字、字母组合)'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					email: [{
						validator: (rule, value, callback) => {
							var reg =
								/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
							if (!value) {
								callback(new Error('请输入邮箱'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('邮箱格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
				}

			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {},
		methods: {
			onSuccess(res) {
				this.form.headImg = res.data
				console.log(res, '上传成功了吗')
			},
			confirm(val) {
				this.form.userType1 = val[0].label
				this.form.userType = val[0].value
				console.log(val)
			},
			handAccountType() {

			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						this.form.phone = this.cache.getCache('phone')
						let res = await this.$u.api.updateEssentialInformation(this.form)
						console.log('验证通过', res);
						this.cache.setCache('userMsg', res)
						uni.switchTab({
							url:'/pages/index/index'
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.perfect-msg {
		.form-box {
			padding: 0 30rpx;
			padding-bottom: 200rpx;

			.account-text {
				color: $bs-color-theme;
				font-size: 24rpx;
				text-align: right;
				margin-top: 10rpx;
			}

			.head-box {
				/deep/ .u-form-item__body {
					flex-direction: row !important;
				}

				/deep/ .u-form-item--left {
					flex: 100% !important;
				}
			}

			.up-img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				position: relative;
				overflow: hidden;

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 3;
				}

				.img {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				&::after {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: '';
					background: rgba(0, 0, 0, 0.5);
				}
			}
		}

		.btn-box {
			background: #FFFFFF;
			box-shadow: 0 0 26px 0 rgba(18, 27, 83, 0.07);
			padding: 20rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
</style>
